<template>
    <div>
      <van-nav-bar
        title="瑞吉外卖"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        @nav-bar-height="70"
        @nav-bar-background-color="grey"
      />
      &emsp;
      <van-image
        width="100"
        height="100"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        radius=10
      />
      
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="分组1" />
        <van-sidebar-item title="分组2" />
      </van-sidebar>


      <van-card
       num="2"
       price="2.00"
       desc="Q弹爽口，奶茶味道葱郁"
       title="商品1"
       thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        >     
       <template #tags>
         <van-tag plain type="danger">销量500</van-tag>
       </template>
          <template #footer>
       <van-button size="mini">购买</van-button>
      </template>
    </van-card>


      <van-card
       num="2"
       price="2.00"
       desc="Q弹爽口，奶茶味道葱郁"
       title="商品2"
       thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        >     
       <template #tags>
         <van-tag plain type="danger">销量500</van-tag>
       </template>
          <template #footer>
       <van-button size="mini">购买</van-button>
      </template>
    </van-card>




















      <van-tabbar v-model="active">
          <van-tabbar-item icon="home-o">标签</van-tabbar-item>
          <van-tabbar-item icon="search">标签</van-tabbar-item>
          <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
          <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
      </van-tabbar>



    </div>
</template>

<script>
export default {
    data() {
        return {
          activeKey: 0,

        };
    },

    mounted() {},

    methods:{

    }
};
</script>

<style scoped></style>

